<template>
	<view class="room_bar" style="padding-bottom: 20rpx;">
		<chat-suit-emoji ref="emoji" @newEmojiStr="emojiAction"></chat-suit-emoji>
		<chat-suit-main ref="main" :username="username" :chatType="chatType" :orderExt="orderExt" 
			@inputBlured="inputBlured" @inputFocused="cancelEmoji" @gbEmoji="cancelEmoji" @toShowother="toShowother"
			@toyuyy="toggleRecordModal" @tobq="openEmoji"></chat-suit-main>
		<chat-suit-image ref="image" :username="username" :chatType="chatType" :orderExt="orderExt" ></chat-suit-image>

		
		<view class="other_func" style="display: flex;align-items: center;justify-content: space-around;" v-if="isShowother">
			<view style="display: flex;flex-direction: column;align-items: center;" @tap="sendImage">
				<image src="../../../static/images/xc@2x.png" style="height: 100rpx;" mode="heightFix"/>
				<view style="color: #8E8F8F;font-size: 24rpx;">相册</view>
			</view>
			<view style="display: flex;flex-direction: column;align-items: center;" @tap="openCamera">
				<image src="../../../static/images/ps@2x.png" style="height: 100rpx;" mode="heightFix"/>
				<view style="color: #8E8F8F;font-size: 24rpx;">拍摄</view>
			</view>
			<view style="display: flex;flex-direction: column;align-items: center;" @tap="overZixun">
				<image src="../../../static/images/jswz@2x.png" style="height: 100rpx;" mode="heightFix"/>
				<view style="color: #8E8F8F;font-size: 24rpx;">结束问诊</view>
			</view>
			<!-- <view class="open_emoji" @tap="openEmoji" style="background-color: #d5d5d5;margin-left: 0rpx;width: 12%;border: 2rpx solid #b5b5b5;box-sizing: border-box;height: 70rpx;">
				<image src="http://tuozhen1.oss-cn-beijing.aliyuncs.com/ueditor/upload/weixin/images/Emoji.png"/>
			</view>
			<view class="open_camera" @tap="openCamera" style="background-color: #d5d5d5;margin-left: 0rpx;width: 12%;border: 2rpx solid #b5b5b5;box-sizing: border-box;padding-top: 10rpx;padding-bottom: 10rpx;height: 70rpx;">
				<image src="http://tuozhen1.oss-cn-beijing.aliyuncs.com/ueditor/upload/weixin/images/camora.png" style="width:48rpx; height: 36rpx"/>
			</view>
			<view class="v-record" @tap="toggleRecordModal" style="width: 100rpx;background-color: #FFFFFF;margin-left: 0rpx;width: 40%;border: 2rpx solid #b5b5b5;box-sizing: border-box;height: 70rpx;">
					<image
						class="icon-record"
						:src="recordStatus != RecordStatus.HIDE ? 'http://tuozhen1.oss-cn-beijing.aliyuncs.com/ueditor/upload/weixin/images/iconAudioActive@2x.png' : 'http://tuozhen1.oss-cn-beijing.aliyuncs.com/ueditor/upload/weixin/images/voice.png'" style="width:32rpx; height: 48rpx"/>
			</view>
			<view class="send_image" @tap="sendImage" style="background-color: #d5d5d5;margin-left: 0rpx;width: 12%;border: 2rpx solid #b5b5b5;box-sizing: border-box;padding-top: 10rpx;padding-bottom: 10rpx;height: 70rpx;">
				<image src="http://tuozhen1.oss-cn-beijing.aliyuncs.com/ueditor/upload/weixin/images/pic.png" style="height:40rpx; width: 40rpx"/>
			</view>
			<view class="send_image" @tap="overZixun" style="background-color: #d5d5d5;margin-left: 0rpx;width: 12%;border: 2rpx solid #b5b5b5;box-sizing: border-box;padding-top: 10rpx;padding-bottom: 10rpx;height: 70rpx;">
				<image src="http://tuozhen1.oss-cn-beijing.aliyuncs.com/ueditor/upload/weixin/images/over.png" style="height:40rpx; width: 40rpx"/>
			</view> -->
		</view>
	</view>
</template>

<script>
	let RecordStatus = require("./suit/audio/record_status").RecordStatus;
	let msgType = require("../msgtype");
	import chatSuitMain from "@/comps/chat/inputbar/suit/main/main.vue";
	import chatSuitEmoji from "@/comps/chat/inputbar/suit/emoji/emoji.vue";
	import chatSuitImage from "@/comps/chat/inputbar/suit/image/image.vue";
	
	export default {
		components: {
			chatSuitMain,
			chatSuitImage,
			chatSuitEmoji
		},
		props: {
			username: {
				type: Object,
				value: {}
			},
			chatType: {
				type: String,
				value: msgType.chatType.SINGLE_CHAT,
			},
			orderExt: {
				type: Object,
				value: {},
			},
		},
		data() {
			return {
				isShowother:false,
				recordStatus: RecordStatus.HIDE,
				RecordStatus,
			}
		},
		created() {
			
		},
		
		onReady() {
			
		},
		methods: {
			toShowother(){
				this.isShowother = !this.isShowother;
			},
			inputBlured() {
				this.$emit('inputBlured');
			},
			toggleRecordModal(){
				this.$emit('tapSendAudio');
			},
			
			// sendVideo(){
			// 	this.data.__comps__.video.sendVideo();
			// },
			
			openCamera(){
				this.$refs.image.openCamera();
			},
			
			openEmoji(){
				this.$refs.emoji.openEmoji();
			},
			
			cancelEmoji(){
				this.$refs.emoji.cancelEmoji();
			},
			
			sendImage(){
				this.$refs.image.sendImage();
			},
			
			sendLocation(){
				// this.data.__comps__.location.sendLocation();
			},
			
			emojiAction(evt){
				this.$refs.main.emojiAction(evt.msg);
			},
			overZixun(){
				var that = this;
				uni.showModal({
					title:'是否结束咨询',
					success:function(res){
						if(res.confirm){
							var orederId=that.orderExt.orderId;
							var userId=that.orderExt.userId;
							uni.request({
								url:'https://app.mzmzb.com/application-usrapp/userOrd/endFreeOrd.tz?ordId='+orederId,
								method:'POST',
								header:{
									'content-type': 'application/json'
								},
								success:function(res){
									console.log(res.data)
									if(res.data.success==true){
										uni.redirectTo({
											url:'/pages5/advisory/index?userId='+userId
										})
									}
								}
							})
						}else if(res.cancel){
							console.log("取消");
						}
					}
				})
			}
		}
	}
</script>

<style>
	.room_bar {
		width: 100%;
		height: auto;
		border-top: 1px solid #CFCFCF;
		position: fixed;
		bottom: 0;
		right: 0;
		z-index: 1;
		background-color: #FFFFFF;
		transform: translateZ(1000px);
	}
	
	.other_func {
		width: 100%;
		height: 160rpx;
		display: flex;
	}
	.other_func_X{
		height: 128rpx;
	}
	
	.other_func image {
		width: 42rpx;
		height: 40rpx;
	}
	
	.open_emoji,
	.send_image,
	.open_camera,
	.v-record {
		width: 48rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 48rpx;
	}
	
	
	.v-record .icon-record {
		width: 18rpx;
		height: 40rpx;
	}
	.v-record{
		margin-left: 48rpx;
	}
	.open_camera, .send_image{
		margin-left: 64rpx;
	}
	
	

</style>
